<template>
  <div class="dashboard-container">
    <div class="app-container">题库添加组件</div>
    <el-card>
      <el-form :model="addRuleForm" :rules="addRules" ref="addRuleFormRef" label-width="100px" >

        <el-form-item label="学科" prop="subjectID" >
          <el-select v-model="selectedSubject" placeholder="请选择">
            <el-option
              v-for="item in sbjList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="目录" prop="catalogID" >
          <el-select v-model="addRuleForm.catalogID" placeholder="请选择">
            <el-option
              v-for="item in choiceList.catalogID"
              :key="item"
              :label="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="企业" prop="enterpriseID" >
          <el-select v-model="addRuleForm.enterpriseID" placeholder="请选择">
            <el-option
              v-for="item in choiceList.enterpriseID"
              :key="item"
              :label="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="城市" prop="city" >
          <el-select
            v-model="selectedProvince"
            placeholder="请选择"
            @change="handleChange">
            <el-option
              v-for="(item, index) in provinces"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
          <el-select v-model="selectedCity" placeholder="请选择">
            <el-option
              v-for="(item, index) in citys"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="方向" prop="direction" >
          <el-select v-model="addRuleForm.direction" placeholder="请选择">
            <el-option
              v-for="item in choiceList.direction"
              :key="item"
              :label="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="题型" prop="questionType">
          <el-radio-group v-model="addRuleForm.questionType">
            <el-radio label="单选"></el-radio>
            <el-radio label="多选"></el-radio>
            <el-radio label="简答"></el-radio>

          </el-radio-group>
        </el-form-item>

        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="addRuleForm.difficulty">
            <el-radio label="简单"></el-radio>
            <el-radio label="一般"></el-radio>
            <el-radio label="困难"></el-radio>

          </el-radio-group>
        </el-form-item>

        <el-form-item label="题干" prop="question">
          <quill-editor ref="addRuleFormRef.question"
              v-model="addRuleForm.question"

              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @ready="onEditorReady($event)"

              >
          </quill-editor>
        </el-form-item>


        <el-form-item label="解析视频" prop="videoURL">
          <el-input v-model="addRuleForm.videoURL" placeholder="请输入视频地址,以url开头"></el-input>
        </el-form-item>

         <el-form-item label="题目备注" prop="remarks">
          <el-input
            type="textarea"
            :autosize="{ minRows: 12, maxRows: 12}"
            v-model="addRuleForm.remarks"
            placeholder="请输入备注"></el-input>
        </el-form-item>

        <el-form-item label="试题标签" prop="tags">
          <el-input v-model="addRuleForm.tags" placeholder="请输入"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="onSubmit"> 提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<script>
import { choice } from '@/api/hmmm/questions.js'
import {provinces,citys} from '@/api/hmmm/citys.js'

import {list as subjectList} from '@/api/hmmm/subjects.js'
import { add } from '@/api/hmmm/questions.js'
export default {
  name: 'QuestionsNew',
  created(){
    this.getQuestionChoice(),
    this.getSubjectList()
  },
  data() {
    return {
      choiceList:[], // 精选题库列表数据
      sbjList:[],//学科列表
      selectedSubject:null,// 已选择学科
      //提交表单的数据
      addRuleForm:{
        subjectID:'',// 学科
        catalogID:'',// 目录
        enterpriseID:'',// 企业
        province:'',
        city:'',
        direction:'',// 方向
        questionType:'',// 题型
        difficulty:'',// 难度
        videoURL:'',//解析视频
        remarks:'',// 题目备注
      },
      provinces:provinces(),//省份城市信息
      citys:[],
      selectedProvince:'',
      selectedCity:'',
      // 表单验证规则
      addRules:{
        subjectID:[
          { required: true, message: '请选择学科', trigger: 'blur' },
        ],
        catalogID:[
          { required: true, message: '请选择目录', trigger: 'blur' },
        ],
        enterpriseID:[
          { required: true, message: '请选择企业', trigger: 'blur' },
        ],
        city:[
          { required: true, message: '请选择城市', trigger: 'blur' },
        ],
        direction:[
          { required: true, message: '请选择方向', trigger: 'blur' },
        ],
        questionType:[
          { required: true, message: '请选择题型', trigger: 'blur' },
        ],
        difficulty:[
          { required: true, message: '请选择难度', trigger: 'blur' },
        ],
        question:[
          { required: true, message: '请输入题干', trigger: 'blur' },
        ],
        videoURL:[
          { required: false, message: '请输入题干', trigger: 'blur' },
        ],
        remarks:[
          { required: false, message: '请输入题干', trigger: 'blur' },
        ],
        tags:[
          { required: true, message: '请选择难度', trigger: 'blur' },
        ],
      }
    }
  },
  methods:{
    // 请求精选题库列表
    async getQuestionChoice(){
      const { data:res } = await choice(this.queryInfo)
      this.choiceList = res.items
      console.log(this.choiceList);

    },
    //提交表单
    async onSubmit(){
      const {data:res} = await add(this.addRuleForm)
    },
    // 获取学科列表
    async getSubjectList(){
      const {data:res} = await subjectList()
      this.sbjList = res.items
      console.log(res.items);
    },
    getCitys:citys,
    handleChange(){
      this.citys = this.getCitys(this.selectedProvince)
      this.selectedCity = '',
      this.disabled = false;
    },
    onEditorBlur(){},
    onEditorFocus(){},
    onEditorReady(){}
  }
}
</script>

<style scoped>
</style>
